/**
 * WorkList 组件 - 作品列表展示
 * 
 * 功能：
 * 1. 展示作品列表，支持多种作品类型的展示
 * 2. 提供作品类型筛选功能
 * 3. 支持左右滚动查看更多作品
 * 4. 响应式布局，自适应不同屏幕尺寸
 * 
 * 组件结构：
 * - 顶部标签栏：用于筛选不同类型的作品
 * - 作品列表区：水平滚动展示作品卡片
 * - 左右滚动按钮：用于控制作品列表的滚动
 */

import React, { useState, useRef } from "react";
import styles from "./style.module.css";
import { Empty, Button } from "antd";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import WorkCard, { Work } from "./components/WorkCard";

/**
 * WorkList 组件 - 作品列表主组件
 * @param {WorkListProps} props - 组件属性
 * @param {Work[]} props.works - 作品数据数组
 */

// 作品类型标签配置
const workTabs = [
  { key: "all", label: "全部" },
  { key: "H5", label: "H5" },
  { key: "poster", label: "海报" },
  { key: "long", label: "长页" },
  { key: "form", label: "表单" },
  { key: "interactive", label: "互动" },
  { key: "album", label: "电子画册" },
  { key: "video", label: "视频" },
] as const;

type WorkTab = typeof workTabs[number];

interface WorkListProps {
  works: Work[];
}

const WorkList: React.FC<WorkListProps> = ({ works }) => {
  // 当前选中的作品类型标签
  const [workTab, setWorkTab] = useState("all");
  // 滚动容器的引用
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  // 控制左右按钮的显示状态
  const [showLeftButton, setShowLeftButton] = useState(false);
  const [showRightButton, setShowRightButton] = useState(false);
  // 根据选中的标签筛选作品
  const filteredWorks =
    workTab === "all" ? works : works.filter((w: Work) => w.type === workTab);

  /**
   * 检查是否需要显示滚动按钮
   */
  const checkScrollButtons = () => {
    if (scrollContainerRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
      // 当有向左滚动的空间时显示左按钮
      setShowLeftButton(scrollLeft > 0);
      // 当有向右滚动的空间时显示右按钮
      setShowRightButton(scrollLeft + clientWidth < scrollWidth);
    }
  };

  /**
   * 处理列表滚动
   * @param {('left'|'right')} direction - 滚动方向
   */
  const handleScroll = (direction: "left" | "right") => {
    if (scrollContainerRef.current) {
      // 每次滚动的距离设置为容器宽度的80%
      const containerWidth = scrollContainerRef.current.clientWidth;
      const scrollAmount = Math.floor(containerWidth * 0.8);
      const newScrollLeft =
        scrollContainerRef.current.scrollLeft +
        (direction === "left" ? -scrollAmount : scrollAmount);
      scrollContainerRef.current.scrollTo({
        left: newScrollLeft,
        behavior: "smooth",
      });
    }
  };

  // 监听滚动事件
  React.useEffect(() => {
    const scrollContainer = scrollContainerRef.current;
    if (scrollContainer) {
      // 初始检查
      checkScrollButtons();
      // 添加滚动事件监听
      scrollContainer.addEventListener("scroll", checkScrollButtons);
      // 添加窗口大小改变事件监听
      window.addEventListener("resize", checkScrollButtons);

      return () => {
        // 清理事件监听
        scrollContainer.removeEventListener("scroll", checkScrollButtons);
        window.removeEventListener("resize", checkScrollButtons);
      };
    }
  }, []);

  // 当过滤后的作品列表改变时，重新检查按钮状态
  React.useEffect(() => {
    checkScrollButtons();
  }, [filteredWorks]);

  return (
    <div className={styles.worksBox}>
      {/* 作品类型筛选标签 */}
      <h3 className={styles.worksTitle}>作品</h3>
      <div className={styles.worksTabs}>
        {workTabs.map((tab: WorkTab) => (
          <span
            key={tab.key}
            className={
              workTab === tab.key ? styles.worksTabActive : styles.worksTab
            }
            onClick={() => setWorkTab(tab.key)}
          >
            {tab.label}
          </span>
        ))}
      </div>
      {/* 作品列表容器 */}
      <div className={styles.worksListContainer}>
        {/* 左滚动按钮 */}
        {showLeftButton && (
          <Button
            className={styles.scrollButton}
            icon={<LeftOutlined />}
            onClick={() => handleScroll("left")}
          />
        )}
        {/* 作品列表 */}
        <div className={styles.worksList} ref={scrollContainerRef}>
          {filteredWorks.length > 0 ? (
            filteredWorks.map((work: Work) => (
              <WorkCard work={work} key={work.id} />
            ))
          ) : (
            <div className={styles.emptyContainer}>
              <Empty
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description="你的作品列表为空，快去创建吧"
              />
            </div>
          )}
        </div>
        {/* 右滚动按钮 */}
        {showRightButton && (
          <Button
            className={styles.scrollButton}
            icon={<RightOutlined />}
            onClick={() => handleScroll("right")}
          />
        )}
      </div>
    </div>
  );
};

export default WorkList;
